<template>
  <div class="container">
    <el-table :data="questionsData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.questionType === '1'">单选</span>
          <span v-else-if="scope.row.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>
      <el-table-column label="题干" width="280">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column label="难度" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.difficulty === '1'">简单</span>
          <span v-else-if="scope.row.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column label="审核状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.chkState === 0">待审核</span>
          <span v-else-if="scope.row.chkState === 1">通过</span>
          <span v-else>拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column label="发布状态" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.publishState === 1&&scope.row.chkState===1">已发布</span>
          <span v-else-if="scope.row.publishState === 0&&scope.row.chkState===1">已下架</span>
          <span v-else>待发布</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="previewQuestion(scope.row.id)"
            type="text"
            size="small"
            >预览</el-button
          >
          <el-button
            :disabled="scope.row.chkState === 1 ? false : true"
            type="text"
            size="small"
            @click="showCheck(scope.row)"
            >审核</el-button
          >
          <el-button
            :disabled="scope.row.publishState === 1 ? true : false"
            type="text"
            size="small"
            @click="$router.push(`new?id=${scope.row.id}`,)"
            >修改</el-button
          >
          <el-button
          :disabled="scope.row.chkState===0?true:false "
          type="text" 
          size="small" 
          @click="onPublish(scope.row)">
            {{ scope.row.publishState === 0 ? "上架" : "下架" }}
          </el-button>
          <el-button
            :disabled="scope.row.publishState === 1 ? true : false"
            type="text"
            size="small"
            @click="onClear(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 审核对话框 -->
    <el-dialog
      class="checkDialog"
      title="题目审核"
      :visible.sync="isCheckDialogVisible"
      width="30%"
    >
      <el-form v-model="checkForm" ref="checkFormRef">
        <el-form-item>
          <el-radio v-model="checkForm.chkState" :label="1">通过</el-radio>
          <el-radio v-model="checkForm.chkState" :label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入审核意见"
            type="textarea"
            v-model="checkForm.chkRemarks"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isCheckDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCheck">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览对话框 -->
    <questions-preview 
     ref="questionsPreviewRef"
    :previewData="previewData"
    />
    
  </div>
</template>

<script>
import { parseTimeByString } from "@/filters";
import {
  choiceCheck,
  choicePublish as quesPublish,
  remove as removeQuesById,
  detail as questionDetail
} from "@/api/hmmm/questions.js";
import QuestionsPreview from './questions-preview'


export default {
  name: "QuestionsCheck",
  components:{
    QuestionsPreview
  },
  props: {
    //试题数据
    questionsData: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      isCheckDialogVisible: false, //控制审核对话框的显示与隐藏
      checkForm: {
        id: null, //当前操作的试题id
        chkState: 1, //单选按钮选中值
        chkRemarks: "", //审核意见
      },
      previewData:{}, //预览的当前试题数据
    };
  },
  methods: {
    // 显示审核对话框
    showCheck(val) {
      // console.log(val);
      this.isCheckDialogVisible = true;
      this.checkForm.id = val.id;
    },
    // 提交审核
    async confirmCheck() {
      if (this.checkForm.chkRemarks.trim().length === 0) {
        this.$message.warning("请输入审核意见");
      }
      // console.log(this.checkForm);
      const { data: res } = await choiceCheck(this.checkForm);
      // console.log(res);

      this.isCheckDialogVisible = false;
      this.$emit("get-checkdata");
    },
    // 是否上架题目
    async onPublish(val) {
      // 是否上架消息提示框
      const confirmResult = await this.$confirm(
        `您确定${val.publishState===1?'下架':'上架'}这道题目吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("取消操作");
      }
      let pubState = val.publishState === 0 ? 1 : 0;
      const { data: res } = await quesPublish({
        id: val.id,
        publishState: pubState,
      });
      // console.log(res);
      if (!res.success) {
        return this.$message.error("上架失败");
      }
      this.$message.success(`${pubState === 1?'上架':'下架'}成功`);
      this.$emit("get-publishdata");
    },
    // 是否删除题目
    async onClear(val) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该题目, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("取消删除");
      }
      const { data: res } = await removeQuesById({ id: val.id });
      console.log(res);
      this.$emit("clear");
    },
    // 试题预览函数
    async previewQuestion(id){
      // console.log(id);
     this.$refs.questionsPreviewRef.isPreviewDialogVisible=true
      const {data:res}=await questionDetail({id})
      console.log(res);
      this.previewData=res
    }
  },
};
</script>

<style scoped lang='scss'>
.container {
  
     ::v-deep.el-dialog__footer {
      text-align: right;
    }  
}
</style>
